<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>

        <style>
            .div {
                width: 200px;
                height: 200px;
            }

            .blue {
                width: 300px;
                height: 300px;
                background-color: blue;
            }

            .red {
                width: 200px;
                height: 200px;
                background-color: red;

                /* 绝对定位的属性
                       1.元素原来文档流的位置不存在，脱离文档流
                       2.绝对定位有可能 影响到其他元素的布局位置 
                       3.绝对定位是绝对于什么？
                         - 不是绝对与自己原来的位置
                         - 绝对于 body 的位置？
                           - 绝对于已经定位过（相对定位、绝对定位、固定定位）的祖先元素
                            （如果没有找到定位过的祖先元素，默认以body 作为绝对定位的起点）【很重要】

                        子绝父相：子元素想要设置绝对定位，需要把父元素设置成相对定位
                */

                position: absolute;
                /* 如果left是0 top也是0  所处的位置在整个页面的左上角，没有任何间距
                   并不是元素原来的位置
                */
                top: 100px;
                left: 100px;
            }

            /* 
                绝对定位父元素没有任何定位方式或者静态定位的方式
                        绝对与 body 的位置【成立】
                绝对定位父元素 相对定位
                        绝对于 body 位置【不成立】
                        绝对于父元素的位置 【成立】
            */
            .container {
                width: 400px;
                height: 600px;
                border: 1px solid green;

                position:relative;
            }
        </style>
    </head>
    <body>
        <!-- 
            <div class="box red"></div>
            <div class="box blue"></div>
         -->
        <div class="container">
            <div class="box red"></div>
            <div class="box blue"></div>
        </div>
 

    </body>
</html>